<!doctype html>
<html lang="zh-cn">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>ECharts入门-简单圆环图示例</title>
 </head>
 <body>
  	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="myChart" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('myChart')); 
		var	option = {
				title : {
					text: '某站点用户访问来源',
					subtext: '纯属虚构',
					x:'center'
				},
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient : 'vertical',
					x : 'left',
					data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
				},
				toolbox: {
					show : true,
					feature : {
						saveAsImage : {show: true}
					}
				},
				calculable : true,// 支持拖拽
				series : [
					{
						name:'访问来源',
						type:'pie',
						radius : '55%',
						center: ['50%', '50%'],
						data:[
							{value:335, name:'直接访问'},
							{value:310, name:'邮件营销'},
							{value:234, name:'联盟广告'},
							{value:135, name:'视频广告'},
							{value:1548, name:'搜索引擎'}
						]
					}
				]
			};
        // 为echarts对象加载数据 
        myChart.setOption(option);            
	</script>
 </body>
</html>
